.center80 {
    margin: auto;
    position: absolute;
    top: 36%;
    text-align: center;
    width: 100%;
}
.h-100 {
    height: 720px;
    position: relative;
}
.floatright {
    font-weight: 600;
    font-size: 15px;
}
.drww-box {
    min-height: 80vh;
}
.title{
    display: flex;
    justify-content: center;
    height: 30px;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
}
.color-box{
    display:  flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
.color-box>div{
    width: 40%;
    border-radius: 19px;
    height: 100px;
    margin-top: 20px;
    box-shadow: 1px 3px 7px #dddddd;
}
.mini_title{
    display: flex;
    justify-content: center;
    height: 20px;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    color: #666666;
}
.shadow-md{
    box-shadow: 1px 2px 3px #666666;
}
.rank-header{
    justify-content: space-between;
    align-items: center;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
    padding: 0 10px;
    height: 50px;
    width: 100%;
    box-shadow: 1px 2px 3px #dddddd;
}
.mt-10{
    margin-top: 10px;
}
.he1 ,.he2 ,.he3, .he4 {
    justify-content: center;
    align-items: center;
    display: flex;   
    
}
.he1 {
    width: 20%;
}
.he2 {
    width: 30%;
    
}.he3{
    width: 20%;
    
}.he4 {
    width: 30%;
    
}
.he5 {
    width: 30%;

}
.rank-body {
    justify-content: center;
    align-items: center;
    display: flex; 
    border-bottom: 1px solid #dddddd;
}
.rank-body .he1 ,.rank-body .he2 ,.rank-body .he3,.rank-body .he4{
    color: #333;
    font-weight: 600;
    height: 50px;
    justify-content: center;
    align-items: center;
    display: flex; 
}
.chapion{
    width: 30px;
}
.colorHu div{
    color: #00BFFF !important;
}
.color-box>div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.color-box>div>.trank {
    font-weight: 600;
}
.color-box>.box1{
    background-image: linear-gradient(to bottom right, #f57b09, #ffd038);

    color: #fff;
}
.color-box>.box2{
    background-image: linear-gradient(to bottom right, #ffd038,  #f57b09);

    color: #fff;
}
.color-box>.box3{
    background-image: linear-gradient(to bottom right, #62a3bd, #35f3c7);


    color: #fff;
}
.color-box>.box4{
    background-image: linear-gradient(to bottom right, #fb686a, #fda5a6);

    color: #fff;
}
.color-box>.box5{
    background-image: linear-gradient(to bottom right, #f76692, #eb295e);

    color: #fff;
}
